<template>
  <n-data-table
    v-bind="props.tableProps"
    :columns="$attrs.columns"
    :style="$attrs.style"
    :max-height="$attrs.maxHeight"
    :min-height="$attrs.minHeight"
  ></n-data-table>
  <div class="pagination-wrapper">
    <div class="">
      <span>总共{{ total }}条数据 {{ pageSize }}</span>
    </div>
    <div class="flex items-center">
      <div class="w-[114px] mr-[16px]">
        <n-select
          :options="paginationOpts"
          :value="pageSize"
          @update:value="handleChangePageSize"
        />
      </div>
      <div>
        <n-pagination
          v-bind="props.paginationProps"
          @update:page="handleChangePage"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed } from "vue";
import { IBasicTableProps } from "./props";
import { get } from "lodash-es";

const paginationOpts = [
  {
    value: 10,
    label: "10条/页",
  },
  {
    value: 20,
    label: "20条/页",
  },
  {
    value: 50,
    label: "50条/页",
  },
  {
    value: 100,
    label: "100条/页",
  },
];

const emits = defineEmits(["register", "changePage", "changePageSize"]);

const props = defineProps<IBasicTableProps>();

const pageSize = computed(() => get(props.paginationProps, "pageSize") || 10);

const total = computed(() => get(props.paginationProps, "total") || 0);

emits("register");

const handleChangePage = (page: number) => {
  emits("changePage", page);
};

const handleChangePageSize = (pageSize: number) => {
  console.log("==== pageSize");
  console.log(pageSize);
  emits("changePageSize", pageSize);
};
</script>
<style lang="scss" scoped>
.pagination-wrapper {
  @apply flex justify-between items-center mt-[16px];
}
</style>
